<template>
  <div id="description">
    <van-nav-bar
      title="商品详情"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />

    <!-- 轮播图 -->
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(item, index) in imgs" :key="index">
        <img class="carousel" v-lazy="item.img_url" />
      </van-swipe-item>
    </van-swipe>

    <!-- 小提示 -->
    <div class="tips">
      <span>30天无忧退货</span>
      <span>48小时快速发货</span>
      <span>满88元包邮</span>
    </div>
    <!-- 商品简介 -->
    <div class="introduction">
      <h3 class="infoName">{{ info.name }}</h3>
      <p class="infoP">{{ info.goods_brief }}</p>
      <p class="infoPrice">￥{{ info.retail_price }}</p>
    </div>
    <!-- 选择规格参数 -->
    <van-cell title="选择规格参数" is-link />
    <!-- 商品参数 -->
    <div class="shopParameters">
      <h3 class="shopA">商品参数</h3>
      <div class="shopinfo" v-for="(item, index) in attribute" :key="index">
        <span class="shopName">{{ item.name }}</span>
        <span class="shopName2">{{ item.value }}</span>
      </div>
    </div>
    <!-- 商品主图 -->
    <div class="commodity" v-html="info.goods_desc"></div>
    <!-- 商品导航 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
      <van-goods-action-icon icon="cart-o" text="购物车" />
      <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
      <van-goods-action-button
        @click="chooseSku"
        type="warning"
        text="加入购物车"
      />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
    <!-- 商品规格 -->
    <van-sku
      v-model="show"
      :sku="sku"
      :goods="goods"
      @buy-clicked="onBuyClicked"
      @add-cart="onAddCartClicked"
    />
  </div>
</template>

<script>
import axios from "axios";

let sku = {
  // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
  // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
  tree: [
    {
      k: "颜色", // skuKeyName：规格类目名称
      k_s: "s1", // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
      v: [
        {
          id: "30349", // skuValueId：规格值 id
          name: "红色", // skuValueName：规格值名称
        },
        {
          id: "1215",
          name: "蓝色",
        },
      ],
      largeImageMode: true, //  是否展示大图模式
    },
  ],
  // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
  list: [
    {
      id: 2259, // skuId，下单时后端需要
      price: 100, // 价格（单位分）
      's-1': '2', // 规格类目 k_s 为 s1 的对应规格值 id
      's-2': '3', // 规格类目 k_s 为 s2 的对应规格值 id
      stock_num: 110 // 当前 sku 组合对应的库存
    },
    {
      id: 2259, // skuId，下单时后端需要
      price: 100, // 价格（单位分）
      's-1': '1', // 规格类目 k_s 为 s1 的对应规格值 id
      's-2': '4', // 规格类目 k_s 为 s2 的对应规格值 id
      stock_num: 130 // 当前 sku 组合对应的库存
    }
  ],

  price: "1.00", // 默认价格（单位元）
  stock_num: 227, // 商品总库存
};
export default {
  props: ["id"],
  data() {
    return {
      data: {},
      info: [],
      attribute: [],
      show: false,
      sku: sku,
      goods: {
        // 默认商品 sku 缩略图
        picture: "https://img.yzcdn.cn/1.jpg",
      },
      messageConfig: {
        // 数据结构见下方文档
      },
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onBuyClicked() {},
    onAddCartClicked() {},
    chooseSku() {
      this.show = true;
    },
  },
  computed: {
    imgs() {
      if (this.data.gallery == undefined) {
        return [];
      } else {
        return this.data.gallery;
      }
    },
  },
  async created() {
    let res = await axios.get(this.$root.api.GoodsDetail, {
      params: { id: this.id },
    });
    console.log(res);
    let data = res.data;
    this.data = data.data;
    this.info = this.data.info;
    this.attribute = this.data.attribute;
    this.goods.picture = this.info.primary_pic_url;
    this.sku.price = this.info.retail_price;
    this.sku.stock_num = this.info.goods_number;
    let tree = [];
    this.data.specificationList.forEach((item, index) => {
      console.log(item);
      let arr = [];
      item.valueList.forEach((i, d) => {
        console.log(i.name);
        arr.push({
          id: i.id, // skuValueId：规格值 id
          name: i.value,
        });
      });
      tree.push({
        k: item.name, // skuKeyName：规格类目名称
        v: arr,
        k_s: "s-" + item.specification_id,
      });
    });
    this.sku.tree = tree;
  },
};
</script>

<style lang="less">
#description {
  margin: 0;
  padding: 0;
  .carousel {
    width: 100%;
  }
  .tips {
    display: flex;
    justify-content: space-around;
    margin-top: -5px;
    width: 100%;
    background-color: #efefef;
    span {
      position: relative;
      padding: 2px;
      font-size: 12px;
    }
    span::before {
      content: "";
      position: absolute;
      top: 9px;
      left: -5px;
      border-radius: 50%;
      width: 2px;
      height: 2px;
      display: block;
      border: 1px solid red;
    }
  }
  .introduction {
    margin-top: 8px;
    .infoP {
      color: rgb(154, 155, 156);
    }
    .infoPrice {
      color: red;
      font-size: 22px;
      margin-top: 3px;
    }
  }
  .van-cell__title {
    text-align: left;
  }
  .shopParameters {
    padding-bottom: 20px;
    .shopA {
      padding: 7px 0;
    }
    .shopinfo {
      //   padding: 6px 0;
      height: 30px;
      line-height: 30px;
      width: 90%;
      background-color: #efefef;
      margin: -1px auto;
      display: flex;
      justify-content: space-between;
      text-align: left;
      font-size: 12px;
      .shopName {
        width: 75px;
        padding: 0 10px;
        border-right: 1px solid #ccc;
      }
      .shopName2 {
        width: 230px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
  .commodity {
    width: 100%;
    img {
      width: 100%;
    }
    p {
      padding: 0;
      margin: -1px auto;
      display: flex;
    }
  }
}
</style>